<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>TagCloud sort and filter demo</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtagcloud.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script>
        $(document).ready(function () {
            var unemploymentRate = [
                { "country": "Namibia", "rate": 37.6 },
                { "country": "Macedonia, FYR", "rate": 32.0 },
                { "country": "Latvia", "rate": 18.7 },
                { "country": "Lithuania", "rate": 17.8 },
                { "country": "Estonia", "rate": 16.9 },
                { "country": "Serbia", "rate": 16.6 },
                { "country": "Georgia", "rate": 16.5 },
                { "country": "Yemen, Rep.", "rate": 14.6 },
                { "country": "Slovak Republic", "rate": 14.4 },
                { "country": "Dominican Republic", "rate": 14.2 },
                { "country": "Tunisia", "rate": 14.2 },
                { "country": "Armenia", "rate": 28.6 },
                { "country": "Bosnia and Herzegovina", "rate": 27.2 },
                { "country": "Lesotho", "rate": 25.3 },
                { "country": "South Africa", "rate": 24.7 },
                { "country": "Spain", "rate": 20.1 },
                { "country": "Albania", "rate": 13.8 },
                { "country": "Ireland", "rate": 13.6 },
                { "country": "Jordan", "rate": 12.9 },
                { "country": "Greece", "rate": 12.5 }
            ];
            var source =
            {
                datatype: "array",
                localdata: unemploymentRate,
                datafields: [
                    { name: 'country' },
                    { name: 'rate' }
                ]
            };
            var dataAdapter = new $.jqx.dataAdapter(source, {});
            $('#tagCloud').jqxTagCloud({
                width: '600px',
                height: '200px',
                source: dataAdapter,
                fontSizeUnit: 'px',
                minFontSize: 12,
                maxFontSize: 20,
                displayMember: 'country',
                valueMember: 'rate',
                urlBase: 'http://localhost/',
                minColor: '#00AA99',
                maxColor: '#FF0000'
            });

            // Create a jqxListBox
            $("#sortByListBox").jqxDropDownList({
                selectedIndex: 0,
                source: [
                    'none',
                    'label',
                    'value'],
                width: 200, height: 25,
                autoDropDownHeight: true
            });

            $('#sortByListBox').on('select', function (event) {
                var args = event.args;
                var item = $('#sortByListBox').jqxDropDownList('getItem', args.index);
                if (item != null) {
                    $('#tagCloud').jqxTagCloud({ sortBy: item.label });
                }
            });

            $("#sortDirectionListBox").jqxDropDownList({
                selectedIndex: 0,
                source: [
                    'ascending',
                    'descending'],
                width: 200, height: 25,
                autoDropDownHeight: true
            });
            $('#sortDirectionListBox').on('select', function (event) {
                var args = event.args;
                var item = $('#sortDirectionListBox').jqxDropDownList('getItem', args.index);
                if (item != null) {
                    $('#tagCloud').jqxTagCloud({ sortOrder: item.label });
                }
            });

            $("#minValueListBox").jqxDropDownList({
                selectedIndex: 0,
                source: [
                    '0',
                    '5',
                    '15',
                    '25'],
                width: 200, height: 25,
                autoDropDownHeight: true
            });

            $('#minValueListBox').on('select', function (event) {
                var args = event.args;
                var item = $('#minValueListBox').jqxDropDownList('getItem', args.index);
                if (item != null) {
                    $('#tagCloud').jqxTagCloud({ minValueToDisplay: item.label });
                }
            });

            $("#maxTagsListBox").jqxDropDownList({
                selectedIndex: 0,
                source: [
                    '0',
                    '10',
                    '15',
                    '20'],
                width: 200, height: 25,
                autoDropDownHeight: true
            });
            $('#maxTagsListBox').on('select', function (event) {
                var args = event.args;
                var item = $('#maxTagsListBox').jqxDropDownList('getItem', args.index);
                if (item != null) {
                    if (item.label == 0) {
                        $('#tagCloud').jqxTagCloud({ displayLimit: null });
                    } else {
                        $('#tagCloud').jqxTagCloud({ displayLimit: item.label });
                    }
                }
            });
            $("#displayTagValueCheckbox").jqxCheckBox({ width: 120, height: 25 });
            $("#takeTopWeightedItems").jqxCheckBox({ width: 120, height: 25 });
            $('#displayTagValueCheckbox').on('change', function (event) {
                var checked = event.args.checked;
                $('#tagCloud').jqxTagCloud({ displayValue: checked });

            });
            $('#takeTopWeightedItems').on('change', function (event) {
                var checked = event.args.checked;
                $('#tagCloud').jqxTagCloud({ takeTopWeightedItems: checked });

            });
        });
    </script>
</head>

<body>
    <div id="tagCloud"></div>
    Sort by:
    <div id='sortByListBox'></div>
    Sort Direction:
    <div id='sortDirectionListBox'></div>
    Minimal Weight(value) Allowed:
    <div id='minValueListBox'></div>
    Max number of tags:
    <div id='maxTagsListBox'></div>
    <div id="displayTagValueCheckbox" style="margin-top: 5px">Display Tag Value</div>
    <div id="takeTopWeightedItems">takeTopWeightedItems</div>

</body>
</html>
